@charset 'utf-8';

body{
    color: #3C3C3C;
    -webkit-font-smoothing: antialiased;
    background:0 36px repeat-y url(../img/O1CN01PaQurJ1QgnAICTCgg_!!6000000002006-2-tps-1490-2984.png)
}

#headMessage{
width: 1190px;
margin: 0 auto;

li{ float: left;
    line-height: 35px;
    padding: 0 6px;
    font-size: 12px;

.line{
  font-size: 12px;
  color: #ddd;
  padding: 0 5px;
}
}

a{
    color: #6c6c6c;
    font-size: 12px;
}
a:hover{
    color: #f40;
}
}



.search-wrap{
    width: 100%;
    height: 135px;

.search-outer{
    width: 1190px;
    height: 100%;
    margin:0 auto;

.search-r{
    width: 140px;
    height: 100%;
    float: left;
    position: relative;
    bottom: -10px;

.con{
position: relative;
width: 74px;
height: 88px;
margin: 10px 15px;
background: #fff;
border: 1px solid #eee;
color: #666;
text-align: center;
}

img{
    position: absolute;
    display: inline-block;
    width: 62px;
    top: 22px;
    left: 6px;
}

.text{
    position: absolute;
    display: inline-block;
    top: -1px;
    left: 12px;
    color: #ff4400;
    font-size: 13px;
}

}

.search-l{
    width: 200px;
    height: 100%;
    float: left;
    position: relative;

img{
    position: absolute;
    top: 32px;
    left: 8px;
    width: 142px;
    height: 58px;}
}
.search-m{
    margin-top: 10px;
    width: 800px;
    height: 100%;
    float: left;

.search-top-ul{
    margin-left:70px;
}

.search-box{
    border:1px solid #ff4400;
    width:700px ;
    height: 38px;
    border-radius: 22px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background: #fff;

span{
    display: block;
    width: 24px;
    width: 24px;
    position: absolute;
    top: 8px;
    left: 14px;
}
input[type="text"]{
    outline: none;
    height: 26px;
    width: 570px;
    border: none;
    margin: 7px 35px 10px;
    background-color: #ffffff;
    padding-left: 10px;
}
input[type="submit"]{
    border-style: none;
    background-color: #ff4400;
    color: #fff;
    padding:15px 24px 17px 20px;
    position: absolute;
    right: 0px;
    line-height: 10px;
    text-align: center;
    font-size: 16px;
}

}

.search-m-b{
    width: 800px;
    margin: 0 auto;

.search-bot-ul{
    margin-left: 66px;
}

.search-bot{
    font-size: 12px;
    color: #777;
    float: left;
    margin: 10px 5px;
}
.search-bot:hover{
color: #ff4400;
}
}

.search-top{
        float: left;
        font-size: 14px;
        color: #ff4400;
        margin-right: 10px;
        padding: 2px 4px;
        border-top-left-radius: 9px;
        border-top-right-radius: 9px;
}
.search-top:hover{
    background-color: #ff4400;
    color: #fff;
}
}
}
// 隐藏搜索
.search-outer{
.search-bottom{
    width: 1190px;
    height: 50px;
    margin: 0 auto;
    position: fixed;
    background-color: #fff;
    top: 0;
    z-index: 9999;
    display: none;
    

    .logobox{
        width: 190px;
       
        .logo-a{
            display: block;
             width: 80px;
             position: absolute;
             left: 0;
    
         img{
             display: block;
             width: 80px;
             height: 33px;
             margin: 5px auto;
         }
         }
    }

    .tbh-search{
        width: 630px;
        height: 40px;
        margin-left: 55px;
        margin-right: 302px;

    .search-wrap-2{
    position: relative;

    .l-search::before{
    position: absolute;
    top: 0;
    left: 0;
    width: 72px;
    content: '';
    height: 36px;
    border: 2px solid #ff5000;
    border-right: none;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    }

    .l-search{
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        margin-left: 0;
        height: 40px;
        overflow: hidden;
        background: #f4f4f4;
        width: 74px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 200;

        &:hover{
            overflow: visible;
        }
    .search-nav{

li{
    line-height: 38px;
    height: 38px;
    float: none;
    color: #3C3C3C;
    background-color: #f4f4f4!important;
    width: 74px;
    margin-right: 4px;
    cursor: pointer;
    text-align: center;
}

.nav-1{
    color: #3C3C3C;
    font-weight: 400;
    background-image: none;
    filter: none;
    border-top-right-radius: 0;
    border-top-left-radius: 20px
}
.nav-2{
    &:hover{
    color: #ff5000;
    }
}
.nav-3{
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    &:hover{
        color: #ff5000;
        }
}
    }
    .search-icon{
        position: absolute;
        top: 7px;
        right: 8px;
        padding: 4px 3px 3px;
        width: 6px;
        height: 5px;
    
        >span{
            position: absolute;
           font-size: 10px;
        }
        }
    }

    .r-search{
        position: relative;
        width: 630px;
        height: 38px;
        margin-left: 74px;

    .inputbox{
        width: 556px;
        height: 36px;
        border-top: 2px solid #ff5000;
        border-bottom: 2px solid #ff5000;
        position: relative;
        display: flex;

    span{
       margin-top: 7px;
       margin-left: 7px;
    }

    input{
        display: block;
        top: 0;
        left: 0;
        width: 556px;
        border: none;
        margin-left: 10px;
        background-color: #ffffff;
        outline: none;
        height: 26px;
        margin-top: 7px;
    }
    }

    .buttonbox{
        position: absolute;
        right: 0;
        top: 0;
        z-index: 100;
        width: 74px;
        height: 40px;
        overflow: hidden;
        text-align: center;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;

        button{

            font-size: 18px;
    font-weight: 700;
    color: #FFF;
    background-color: #FF4200;
    cursor: pointer;
    height: 100%;
    border: none;
    width: 100%;
        }
    }
    }

    
    }

    }

}
.display{
display: flex;
}
}
}

.search-warp .search-outer .search-m .search-top-ul::after{
    content: "";
    display: block;
    clear: both;
}

.search-warp::after{
content: "";
display: block;
clear: both;
}

// 导航栏
.nav-wrap{
    padding-top: 6px;
    border-radius: 18px 18px 0 0;
    width: 1190px;
    margin: 0 auto;
    background: #fff;

.nav-wrap-outer{
    height: 30px;
    line-height: 30px;
    position: relative;
    color: #000;

.nav-hd{
    .nav-hd-1{
    color:#ff0036;
    &:hover{
    color: #ff5000;
    }
    }
    .nav-hd-2{
    color:#ff0036;
    &:hover{
    color: #ff5000;
        }
    }
    .nav-hd-3{
    color:#33c900;
    &:hover{
    color: #ff5000;
    }
    }
    
}


    a{
    &:hover{
        color: #ff5000;
    }
    
}
}
h2{
    float: left;
    width: 190px;
    text-align: center;
    font-size: 16px;
    color: #FF6200;
    margin-right: 52px;
}
.nav-hd{
float: left;
font-size: 16px;
font-weight: 700;
}

.nav-bd{
    color: #333;
    float: left;
    font-size: 14px;
}

.nav-bd-last{
    color: #333;
    float: left;
    font-size: 14px;
}

li{
float: left;
margin: 0 3px;
text-align: center;
padding: 0 4px;
}

}

// 主体
.main-wrap{
width: 100%;

.main-wrap-outer{
width: 1190px;
height: 100%;
margin: 0 auto;
background-color: #fff;

.main-l{
width: 773px;
height: 522px;
float: left;
clear: left;

.main-top{
width: 100%;
height: 522px;

.main-l-l{

box-sizing: border-box;
float: left;
width: 200px;
height: 522px;
background-color: #fff;

.main-l-ul{
    width: 198px;
    height: 30px;
    display: inline-block;
}

a{
    &:hover{
    text-decoration:underline;
    }
    }
.main-li{
float: left;
padding: 5px 0 0 10px;
color: #666;
font-size: 14px;

&:hover{
color: #ff5000;
}

}


}
}
}

.main-l-m{
float: left;
margin-left: 22px;
margin-top: 10px;
width: 520px;
height: 512px;
position: relative;
overflow: hidden;

.box1{
    width: 520px;
    height: 280px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;

.banner-top{
    width: 5000px;
    position: absolute;  
    
img{
    width: 520px;
    height: 280px;
    float: left;
    border-radius:12px;   
}
}

span{
    position: absolute;
    top: 45%;
    font-size: 2em;
    cursor: pointer;
    user-select: none;
    color:#eee;
    opacity: 0;
}

span:hover{
    opacity: 1;
}
.prev{
left: 0;
}

.next{
right: 0;
}
}

}

}
}

.main-l-m{
.box2{
    min-height: 0;
    background-color: #fff;

.banner-up{
    position: relative;
    width: 520px;
    height: 230px;
    margin-top: 1px;
    overflow: hidden;

.tmall-hd{
font-size: 14px;
padding-top: 6px;
position: relative;

.inner{
height: 24px;
line-height: 24px;
position: relative;

.hd-bg{
background-image: url();
width: 74px;
position: absolute;
top: 2px;
height: 22px;
background-repeat: no-repeat;
background-size: 74px 22px;
}
em{
    font-size: 12px;
    color: #999;
    position: relative;
    margin-left: 80px;
    line-height: 22px;
    font-style: normal;
}

strong{
position: absolute;
top: 1px;
right: 0;
font-family:sans-serif;
font-size: 12px;
font-weight: 400;
}
}
}
}
}
}

.box2{
width: 520px;
height: 230px;
margin: 0 auto;
position: relative;
overflow: hidden;

.banner-bottom{
width: 5000px;
position: absolute;
background-color:#F3F3F3;
border-radius: 12px;

img{
width: 251px;
float: left;
border-radius: 12px;
display: block;
margin-top: 6px;
margin-left: 6px;
margin-top: 10px;
}
}

span{
position: absolute;
top: 45%;
font-size: 2em;
cursor: pointer;
user-select: none;
color:#eee;
}


.prev{
left: 0;
}

.next{
right: 0;
}
}

.main-wrap-outer{
.main-r{
float: right;
width: 384px;
height: 508px;
border-radius: 12px;
margin-right: 18px;
margin-top: 10px;
background-color: #F3F3F3;

.member{
.member-bd{
position: relative;

.avatar-wrapper{
display: block;
margin: 20px auto 0;
width: 50px;
height: 50px;
border-radius: 50%;
background-clip:padding-box;
background-color: #ff6f06;
}
}
}
}
}

.member-bd{
.member-home{
    width: 50px;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
img{
width: 53px;
height: 53px;
border-radius: 50%;
background-clip: padding-box;
}
}


.member-nickurl{
color: #3c3c3c;

.member-nick-info{
    font-size: 12px;
    margin-top: 4px;
    display: block;
    line-height: 17px;
    height: 17px;
    text-align: center;
}
}
.member-nickurl:hover{
color: #ff4400;
}
}

.member{

.member-ft{
height: 42px;
overflow: hidden;
margin-top: 11px;
padding-left: 14px;

.member-logout{
height: 32px;
margin-top: 10px;

a{
display: block;
float: left;
line-height: 32px;
width: 108px;
margin-right: 6px;
text-align: center;
color:#fff;
background-color: #ff6f06;
border-radius: 4px;
font-size: 16px;
}

.btn-login {
width: 128px;
}
}
}
}

.main-r{
.tbh-tip{
margin-top: 16px;
width: 356px;
height: 141px;
border-radius: 6px;
overflow: hidden;
margin-left: 14px;
position: relative;
}
}

.main-r{
.tbh-notice{
background-color: #F3F3F3;
margin-left: 14px;

.notice-top{
margin: 17px 0 14px;
height: 16px;
line-height: 16px;

.notice-title{
height: 16px;
font-size: 12px;
line-height: 16px;
font-weight: 700;  
}

.notice-desc{
margin-left: 6px;
height: 16px;
font-size: 12px;
line-height: 16px;
}
}

.notice-content{
margin-bottom: 8px;
line-height: 18px;
height: 18px;
position: relative;
overflow: hidden;

.notice-tip{
height: 18px;
width: 32px;
    line-height: 18px;
    border-radius: 2px;
    background-color: rgba(255,174,174,.2);
    opacity: .8;
    text-align: center;
    font-size: 12px;
    color: #FF5000;
    font-weight: 700;
    float: left;
}

p{
font-size: 12px;
color: #666;
    margin-left: 8px;
    float: left;
    width: 295px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
}

}
}

.main-r{
.tbh-mytao{
position: relative;
margin: 20px 0 0 12px;
overflow: hidden;


.mytao-content{
float: left;
margin-right: 43px;

span{
width: 60px;
font-size: 24px;
text-align: center;
font-family: iconfont!important;
font-style: normal;
display: inline-block;
-webkit-font-smoothing: antialiased;
}

span:hover{
color: #FF5000;
}

p{
font-size: 12px;
color: #333;
width: 60px;
line-height: 17px;
text-align: center;
}
}
}
}

.main-wrap-outer{

.tbh-discover-goods{
padding-top: 10px;
background-color: #fff;
width: 1190px;
float: left;
height: 330px;
margin: 0 auto;

.goods-inner{

.com-hd{
padding-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
overflow: hidden;
}
.mod-hd{
position: relative;

.mlogo{
margin: 4px 0 0 6px;
height: 20px;
}
}

.total-title{
font-size: 24px;
color: #111;
font-weight: bold;
line-height: 24px;
}

.fl{
float: left;
display: inline;
}

}
}

.goods-list{
height: 310px;
overflow: hidden;

a{
display: block;
float: left;
width: 215px;
overflow: hidden;
margin: 0 0 0 20px;

.img-wrapper{
position: relative;
width: 215px;
height: 215px;
border-radius: 12px;
background: #f4f4f4;
overflow: hidden;

img{
width: 215px;
height: 215px;
border-radius: 12px;
display: block;
background: #fff;
opacity: .9;
}

.mask{
border-radius: 12px;
border-radius: 12px;
position: absolute;
opacity: 0.2;
background: #000;
top: 0;
left: 0;
width: 215px;
height: 215px;
}

}
.info{
overflow: hidden;
padding: 0 4px 0 6px;  

h4{
font-size: 16px;
color: #333333;
letter-spacing: 0;
line-height: 16px;
margin-top: 10px;
font-weight: normal;
width: 198px;
overflow: hidden;
height: 16px;
}

p{
margin-top: 8px;
font-size: 14px;
color: #999999;
letter-spacing: 0;
line-height: 15px;
text-overflow: ellipsis;
width: 182px;
overflow: hidden;
white-space: nowrap;
}
}
}
}
}

.goods-list{
a:hover .info h4{
color: #FF5000;
}
}

.main-wrap-outer{

.tbh-hotsale{
width: 1190px;
margin: 0 auto;
background: #fff;
position: relative;
overflow: hidden;

.hotsale-hd{
    display: block;
    height: 24px;
    margin-bottom: 19px;
    margin-top: 19px;
}

.bar-hd{
position: relative;
padding-left: 20px;
line-height: 48px;
font-size: 20px;

.total-title{
    font-size: 24px;
    color: #111;
    font-weight: bold;
    line-height: 24px;
}

.fl{
    float: left;
    display: inline;  
}

.mlogo{
    margin: 4px 0 0 6px;
    height: 20px;
}
}
}
}

.tbh-hotsale{

.list{
min-height: 652px;

.item{
border-radius: 12px;
float: left;
padding: 7px 7px 0 7px;
margin: 0 0 2px 7px;
color: #6c6c6c;
width: 215px;
height: 319px;
position: relative;
&:hover h4{
color: #f40;
}

&:hover{
background: #f4f4f4;
}
.img-wrapper{
width: 215px;
height: 215px;
border-radius: 12px;
background-color: rgba(0, 0, 0, 0.2);
overflow: hidden;
background: #f4f4f4;

img{
    display: block;
    border-radius: 12px;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: .9;
}

}
.info{
    margin-top: 11px;
    height: 22px;
    line-height: 22px;
    vertical-align: bottom;
    border-radius: 0 0 12px 12px;

.price{
    float: left;
    color: #F40;
    font-size: 20px;
    height: 22px;
    line-height: 22px;

em{
font-family: "Microsoft Yahei";
    display: inline-block;
    zoom: 1; 
    letter-spacing: normal;
    word-spacing: normal;
    margin-right: 2px;
    font-size: 12px;
    vertical-align: inherit;
}
}
}

.marks{
    float: left;
    width: 0;
    height: 18px;
    margin-right: 8px;
    background-repeat: no-repeat;
    position: relative;
    border-radius: 4px;
    background-clip: padding-box;
}

.hotsale-hide {
    display: none;
}
h4{
    margin-top: 9px;
    line-height: 22px;
    height: 44px;
    font-size: 16px;
    color: #111111;
    font-weight: normal;
    transition: color 0.3s;
    overflow: hidden;
}
}
}
}

.hotsale-ft{
    height: 50px;
    background: #fff;
    position: relative;
}
.hotsale-end{
    position: absolute;
    text-align: center;
    color: #ccccd0;
    left: 50%;
    width: 84px;
    line-height: 20px;
    font-size: 18px;
    margin-left: -42px;
    font-style: normal;
    top: 20px;
}

.tbh-helper {
    width: 1190px;
    height: 180px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 0 0 18px 18px;
}

.helper {
    padding-top: 40px;
    height: 140px;
}
.helper .mod {
    float: left;
    margin-right: -1px;
    width: 25%;

.mod-wrap {
    padding: 0 25px;

h4 {
    margin-bottom: 5px;

span {
        margin-left: 12px;
        padding-top: 12px;
        font-size: 16px;
        }

i {
    font-size: 32px;
    color: #999;
    font-family: iconfont!important;
    font-style: normal;
    display: inline-block;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
}

}
}
}

.mod-wrap{

li{
    display: inline-block;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    margin-right: 10px;
    float: none;
    width: auto;
    line-height: 21px;
    
a{
&:hover{
color: #FF5000;
}
}
}
}

.tbh-footer{
min-height: 170px;
width: 100% !important;
max-width: 100% !important;
margin-top: 20px;
padding-bottom: 9px;
background-color: #fff;
font-size: 12px;

b{
    margin: 0 3px;
    font-weight: 400;
    color: #ddd;
    }

.tbh-footer-hd{
padding-top: 7px;
width: 1190px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
border-top: none !important;

p{
margin-bottom: 8px;
line-height: 27px;
border-bottom: 1px solid #ddd;
padding-bottom: 8px;
overflow: hidden;

span{
margin: 0 4px;
color: #9c9c9c;



a{
white-space: nowrap;
color: #6c6c6c;
text-decoration: none;

&:hover{
color: #FF5000;
}
}
}
}
}
}

.second {
    width: 1190px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;

    p:nth-of-type(1) {
        padding-bottom: 8px;
        overflow: hidden;

        span {
            margin: 0 3px;

            a {
                color: #6c6c6c;
                text-decoration: none;
            }
            a:hover{
                color: #FF4400;
            }

        }

        b {
            margin: 0 3px;
            font-weight: 400;
            color: #ddd;
        }

        em {
            margin-left: 30px;
            font-style: normal;
            color: #9c9c9c;
        }
    }

    p:nth-of-type(2) {
        padding-bottom: 8px;
        overflow: hidden;

        span {
            margin: 0 3px;

            a {
                color: #6c6c6c;
                text-decoration: none;
            }
            a:hover{
                color: #FF4400;
            }
        }

        b {
            margin: 0 3px;
            font-weight: 400;
            color: #ddd;
        }

        .sp1 {
            color: #9c9c9c;
        }
    }

    p:nth-of-type(3) {
        padding-bottom: 8px;
        overflow: hidden;

        span {
            margin: 0 3px;
            color: #9c9c9c;
        }

        b {
            margin: 0 2px;
            font-weight: 400;
            color: #ddd;
        }
    }

    p:nth-of-type(4) {
        padding-bottom: 8px;
        overflow: hidden;

        span {
            margin: 0 3px;
            color: #9c9c9c;

            img {
                width: 20px;
                height: 20px;
            }

            a {
                color: #6c6c6c;
                text-decoration: none;
            }
            a:hover{
                color: #FF4400;
            }
        }

        b {
            margin: 0 2px;
            font-weight: 400;
            color: #ddd;
        }
    }
}

.fixedtoll{
    position: absolute;
    background-color: #fff;
    top:450px;
    right: 60px;
    display: block;
    transition: none 0s ease 0s;
    z-index: 100;
    width: 50px;
    text-align: center;
    border-radius: 8px;

    >img{
    display: block;
    position: absolute;
     height: 36px;
     width: 50px;
     top: -28px;
     right: 0;   
    }

    >a{
        display: block;
        height: 50px;
        position: relative;
        text-decoration: none;
        padding: 6px 8px 0;
        font-size: 14px;
        background: #fff;
    }

    >a:after{
    content: '';
    border-bottom: 1px solid #efefef;
    width: 34px;
    position: absolute;
    left: 8px;
    bottom: -1px;
    z-index: 1;
    }

    >.fixed-a1{
    text-decoration: none;
    color: #FFF;
    font-size: 13px;
    font-weight: 700;
    background-image: linear-gradient(135deg,#ff971b,#ff5000);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-clip: padding-box;
    padding-top: 10px;
    height: 40px;
    }

   

    >.fixed-a2{
    color: #ff5000;

    &:hover{
    background-image: linear-gradient(135deg,#ff971b,#ff5000);
    color: #fff;
    }
    }

    >.active{
        background-image: linear-gradient(135deg,#ff971b,#ff5000);
        color: #FFF
        }

   >.fixed-a3{
    font-size: 12px;
    color: #999;
    display: none;
    span{
    position: relative;
    line-height: 20px;
    }

    &:hover{
    background-image: linear-gradient(135deg,#ff971b,#ff5000);
    color: #fff;
    }
   }

   >.display{
       display: block;
   }

   >.fixed-a4{
    font-size: 12px;
    color: #999;
    i{
    font-style: normal;
    display: block;
    line-height: 40px;
    }
    &:hover{
        background-image: linear-gradient(135deg,#ff971b,#ff5000);
        color: #fff;
        }
   }

   >.fixed-a5{
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-clip: padding-box;
    font-size: 12px;
    color: #999;

    &:hover{
        background-image: linear-gradient(135deg,#ff971b,#ff5000);
        color: #fff;
        }
   }
}

.fixed{
    position: fixed;
    top: 70px;
    right: 60px;
}